<template>
	<view class="button">
		<view class="button-container">
			<button
				size="mini"
				:class="{ moreMiniSize: moreMini }"
				@touchstart="handleModify(listItem)"
				:disabled="!listItem.isChoose"
			>
				修改
			</button>
			<button
				type="primary"
				size="mini"
				class="done"
				:class="{ moreMiniSize: moreMini }"
				@touchstart="handleDone(listItem)"
				:disabled="!listItem.isChoose"
			>
				完成
			</button>
			<button
				type="primary"
				class="delete"
				:disabled="!listItem.isChoose"
				size="mini"
				@touchstart="handleDelete(listItem.id)"
			>
				删除
			</button>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	onShow() {},
	mounted() {
		//接收checkbox组件传过来的值
		uni.$on('updatedListItem', data => {
			this.listItem = data;
			this.createAnimation(data.isChoose);
		});
	},
	data() {
		return {
			animationData: {},
			listItem: ''
		};
	},
	props: {
		// listItem: {
		// 	type: Object,
		// 	default: () => {}
		// },
		moreMini: {
			type: Boolean,
			default: false
		}
	},
	computed: {},
	methods: {
		...mapMutations(['deleteListItem']),
		//点击完成按钮时的操作
		handleDone(listItem) {
			if (listItem.isChoose) {
				//通过延迟1毫秒解决和确定按钮重叠也会点到确定按钮的问题
				let _this = this;
				setTimeout(() => {
					uni.showModal({
						title: '消息',
						content: '完成此项任务',
						success(res) {
							// 这个延迟函数是为了动画的
							if (res.confirm) {
								setTimeout(() => {
									listItem.isMove = true;
								}, 200);
								//这个延迟函数是为了更新状态的，也是过滤掉完成的任务
								setTimeout(() => {
									listItem.isDone = true;
									//再次触发这个函数是因为当点击一个完成后，再点一个就会显示多项按钮，所以手动再过滤一次解决bug
									//这个是触发首页的最近添加组件更新已经完成的任务
									//当点击完成按钮后告诉App组件页面去更新状态
								}, 602);
								return;
							} else {
								return;
							}
						}
					});
				}, 100);
			}
		},
		handleDelete(id) {},
		handleModify() {
			console.log(111);
		},
		// 创建动画
		createAnimation(value) {
			const animation = uni.createAnimation({
				transformOrigin: '50% 50%',
				duration: 500,
				timingFunction: 'ease',
				delay: 0
			});
			if (value) {
				animation.scale(1, 1).step();
			} else {
				animation.scale(0, 0).step();
			}
			this.animationData = animation.export();
		},
		setDate() {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			month = month < 10 ? `0${month}` : month;
			day = day < 10 ? `0${day}` : day;
			return `${year}/${month}/${day}`;
		}
	},

	watch: {
		'listItem.isChoose'(newvalue, oldvalue) {
			// this.createAnimation(this.listItem.isChoose);
		}
	}
};
</script>

<style lang="less">
.button {
	.button-container {
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.5s;
		transform-origin: center center;
		transform: scale(1);

		.done {
			margin: 0 10rpx;
		}
		.delete {
			width: 90rpx;
			height: 50rpx;
			line-height: 50rpx;
			letter-spacing: 2rpx;
			padding: 0;
			background-color: #d24d57;
			margin-right: 10rpx;
			transition: all 0.5s;
		}

		.moreMiniSize {
			width: 90rpx;
			height: 50rpx;
			line-height: 50rpx;
			letter-spacing: 2rpx;
			padding: 0;
		}
	}
}
</style>
